<template>
	<view class="vv-c" :style="style">
		<navigator :url="'/pages/detail/detail?id='+id" open-type="navigate"><image class="img" :src="src" mode="widthFix"></image></navigator>
		<!-- <image class="img" :src="src" mode="scaleToFill"></image> -->
		<view class="title">{{title}}</view>
		<view class="star-point">
			<uni-rate :readonly="true" :max="5" :value="value" :size="12" />
			<view class="point">{{value*2}}</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "first-video",
		props: {
			src: {
				type: String,
				default: () => {
					return '/static/logo.png'
				}
			},
			title: {
				type: String,
				default: () => {
					return '真人卡牌特效大乱斗'
				}
			},
			value: {
				type: String,
				default: () => {
					return '5'
				}
			},
			id:{
				type: String,
				default: () => {
					return ''
				}
			}
			// ,
			// value:{
			// 	type:String,
			// 	default:()=>{
			// 		return ''
			// 	}
			// }
		},
		data() {
			return {
				detailList: [],
				style: {
					width: '100px',
					// height: '200px',
					// backgroundColor: '#ffff7f'
				},

				sStyle: {
					top: '0'
				}
			};
		},
		// created() {
		// 	// 组件创建完成后，我们去动态的算出组件的宽高
		// 	let info = uni.getWindowInfo()
		// 	console.log(info);
		// 	// 屏幕宽度
		// 	let screenWidth = info.screenWidth
		// 	let width = (screenWidth - 24) * 0.5
		// 	let height = width / 4 * 2.8
		// 	// 设置宽度
		// 	this.style.width = width + 'px'
		// 	// 设置高度
		// 	this.style.height = height + 'px'


		// 	this.sStyle.top = (height - 55) + 'px'
		// }
	}
</script>

<style scoped>
	.vv-c {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		margin-bottom: 8px;

		position: relative;
	}

	.img {
		width: 75%;
		height: 400px;
		border-radius: 5px;
	}

	.title {
		font-size: 14px;
	}

	.point {
		font-size: 10px;
	}

	.star-point {
		display: flex;
		justify-content: flex-start;
		align-content: space-between;
	}
</style>
